<template>
  <div>
    <p>商品清单</p>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.shopName }} {{ item.price }}/{{ item.count }}
      </li>
    </ul>
    <LianxiThree
      v-for="(item, index) in list"
      :key="index"
      :obj="item"
      @change-num="item.count = $event"
    ></LianxiThree>
    <p>总价:{{ total }}</p>
  </div>
</template>

<script>
import LianxiThree from "./components/LianxiThree.vue";
export default {
  components: {
    LianxiThree,
  },
  props: {},
  data() {
    return {
      list: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  computed: {
    total() {
      return this.list.reduce((num, item) => num + item.price * item.count, 0);
    },
  },
  watch: {},
  created() {},
  methods: {},
};
</script>

<style scoped></style>
